﻿<template>
  <div v-if = "show">
    <el-form label-position="top" class = 'formItenConfig'>
      <el-row :gutter = "20">
        <el-col :span = '12'>
          <el-form-item label = "数据绑定Key(请谨慎修改)">
            <!-- <el-input v-model = "formItemConfig.model" :disabled = "propsInfo && propsInfo.settingFrom !== 'templateSetting'"></el-input> -->
            <el-input v-model = "formItemConfig.model"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "propsInfo && propsInfo.settingFrom !== 'templateSetting' && Object.keys(formItemConfig).indexOf('metaname') >= 0 && formItemConfig.model != '$_filter'">
          <el-form-item :label = "formItemConfig.metauid === currentSelectedMetaTable ? '所属元数据表' : '所属元数据表(与当前选中表不符)'" :class = "formItemConfig.metauid === currentSelectedMetaTable ? '' : 'currentMetaTableChanged'">
            <el-input v-model = "formItemConfig.metaname" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "名称" v-if = "formItemConfig.type != 'grid'">
            <el-input v-model = "formItemConfig.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "占位内容" v-if = "Object.keys(formItemConfig.options).indexOf('placeholder') >= 0">
            <el-input v-model = "formItemConfig.options.placeholder"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "宽度" v-if = "Object.keys(formItemConfig.options).indexOf('width')>=0">
            <el-input v-model = "formItemConfig.options.width"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "时间日期格式化" v-if = "Object.keys(formItemConfig.options).indexOf('format')>=0 && formItemConfig.type== 'Calendar'">
            <el-input v-model = "formItemConfig.options.format"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "按钮类型" v-if = "formItemConfig.type == 'button'">
            <el-select v-model = 'formItemConfig.options.type'>
              <el-option label = 'primary' value = 'primary'></el-option>
              <el-option label = 'success' value = 'success'></el-option>
              <el-option label = 'warning' value = 'warning'></el-option>
              <el-option label = 'danger' value = 'danger'></el-option>
              <el-option label = 'info' value = 'info'></el-option>
              <el-option label = 'text' value = 'text'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "每页显示条目个数" v-if =" Object.keys(formItemConfig.options).indexOf('pageSize')>=0">
            <el-select v-model = 'formItemConfig.options.pageSize'>
              <el-option label = 10 :value = 10></el-option>
              <el-option label = 25 :value = 25></el-option>
              <el-option label = 50 :value = 50></el-option>
              <el-option label = 100 :value = 100></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "tab标签类型" v-if = "formItemConfig.type == 'tabs'">
            <el-select v-model = 'formItemConfig.options.tabType'>
              <el-option label = 'card' value = 'card'></el-option>
              <el-option label = 'border-card' value = 'border-card'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "最小值(不做限制时，可不修改此值)" v-if = "Object.keys(formItemConfig.options).indexOf('min')>=0">
            <el-input-number v-model = "formItemConfig.options.min" :step = "1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label="最大值(不做限制时，可不修改此值)" v-if = "Object.keys(formItemConfig.options).indexOf('max')>=0">
            <el-input-number v-model = "formItemConfig.options.max" :step = "1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "步长" v-if = "Object.keys(formItemConfig.options).indexOf('step')>=0">
            <el-input-number v-model = "formItemConfig.options.step" :step = "1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "精度" v-if = "Object.keys(formItemConfig.options).indexOf('precision')>=0">
            <el-input-number v-model = "formItemConfig.options.precision" :min = "0" :step = "1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "可输入最大长度(0表示不限制)" v-if = "Object.keys(formItemConfig.options).indexOf('maxLength')>=0">
            <el-input-number v-model = "formItemConfig.options.maxLength" :min = '0' :step = "1" :precision = '0'></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否使用控制按钮" v-if = "Object.keys(formItemConfig.options).indexOf('controlsShow')>=0">
            <el-switch v-model = "formItemConfig.options.controlsShow"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "对齐方式" v-if = "Object.keys(formItemConfig.options).indexOf('textAlign')>=0">
            <el-select v-model = 'formItemConfig.options.textAlign'>
              <el-option label = '左对齐' value = 'left'></el-option>
              <el-option label = '右对齐' value = 'right'></el-option>
              <el-option label = '居中' value = 'center'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否显示表单前label" v-if = "Object.keys(formItemConfig.options).indexOf('showLabel')>=0">
            <el-switch v-model = "formItemConfig.options.showLabel"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否为斑马纹表格" v-if = "Object.keys(formItemConfig.options).indexOf('stripe')>=0">
            <el-switch v-model = "formItemConfig.options.stripe"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否显示边框" v-if = "Object.keys(formItemConfig.options).indexOf('border')>=0">
            <el-switch v-model = "formItemConfig.options.border"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "标签的宽度是否自撑开" v-if = "Object.keys(formItemConfig.options).indexOf('stretch')>=0">
            <el-switch v-model = "formItemConfig.options.stretch"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否为多选按钮组" v-if = "Object.keys(formItemConfig.options).indexOf('isCheckBoxButton')>=0">
            <el-switch v-model = "formItemConfig.options.isCheckBoxButton"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否为单选按钮组" v-if = "Object.keys(formItemConfig.options).indexOf('isRadioButton')>=0">
            <el-switch v-model = "formItemConfig.options.isRadioButton"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否允许半选" v-if = "Object.keys(formItemConfig.options).indexOf('allowHalf')>=0">
            <el-switch v-model = "formItemConfig.options.allowHalf"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否显示辅助文字" v-if = "Object.keys(formItemConfig.options).indexOf('showText')>=0">
            <el-switch v-model = "formItemConfig.options.showText"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否显示当前分数" v-if = "Object.keys(formItemConfig.options).indexOf('showScore')>=0">
            <el-switch v-model = "formItemConfig.options.showScore"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否过滤掉逻辑删除的资料" v-if = "Object.keys(formItemConfig.options).indexOf('isFilterDeleted')>=0">
            <el-switch v-model = "formItemConfig.options.isFilterDeleted"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "默认值" v-if = "Object.keys(formItemConfig.options).indexOf('defaultValue')>=0 && (formItemConfig.type == 'TextArea' || formItemConfig.type.indexOf('Input') !== -1 || formItemConfig.type.indexOf('Calendar') !== -1 || formItemConfig.type == 'Switch' || formItemConfig.type == 'Select') && formItemConfig.type !== 'ReadonlyInput'">
            <el-input v-if = "(formItemConfig.type.indexOf('Input') !== -1 || formItemConfig.type === 'TextArea' || formItemConfig.type == 'Select') && formItemConfig.type !== 'ReadonlyInput'" v-model = "formItemConfig.options.defaultValue" clearable></el-input>
            <el-switch v-if = "formItemConfig.type == 'Switch'" v-model = "formItemConfig.options.defaultValue"></el-switch>
            <el-date-picker v-if = "formItemConfig.type == 'Calendar'" type = "datetime" v-model = "formItemConfig.options.defaultValue" :value-format = 'formItemConfig.options.format'></el-date-picker>
            <el-date-picker v-if = "formItemConfig.type == 'CalendarDate'" type = "date" v-model = "formItemConfig.options.defaultValue" value-format='yyyy-MM-dd'></el-date-picker>
            <el-time-picker v-if = "formItemConfig.type == 'CalendarTime'" v-model = "formItemConfig.options.defaultValue" value-format='HH:mm:ss'></el-time-picker>
        </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否隐藏" v-if = "Object.keys(formItemConfig.options).indexOf('isHidden')>=0">
            <el-switch v-model = "formItemConfig.options.isHidden"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "设置联动操作" v-if = "Object.keys(formItemConfig.options).indexOf('linkageOption')>=0">
            <el-input type="text" @focus = 'showSettingNormalLinkageDialog' value = '点击设置表单联动操作' size="mini"></el-input>
          </el-form-item>
        </el-col>
        <!-- echarts相关的配置--------开始 -->
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts'">
          <el-form-item label = "echarts图表高度">
            <el-input-number v-model = "formItemConfig.options.height" :min = "100" :step = "10"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts'">
          <el-form-item label = "echarts图表类型">
            <el-select v-model = "formItemConfig.options.optionType" filterable clearable>
              <el-option value = 'line' label = '折线图'></el-option>
              <el-option value = 'bar' label = '柱状图'></el-option>
              <el-option value = 'pie' label = '饼图'></el-option>
              <el-option value = 'map' label = '中国地图'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts' && formItemConfig.options.optionType !== 'map'">
          <el-form-item label = "是否显示图表示例">
            <el-switch v-model = "formItemConfig.options.showLegend"></el-switch>
          </el-form-item>
        </el-col>
         <el-col :span = '12' v-if = "formItemConfig.type === 'echarts' && formItemConfig.options.showLegend && formItemConfig.options.optionType !== 'map'">
          <el-form-item label = "图表示例展示方向">
            <el-select v-model = "formItemConfig.options.legendOrient" filterable clearable>
              <el-option value = 'vertical' label = '垂直方向'></el-option>
              <el-option value = 'horizontal' label = '水平方向'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts'">
          <el-form-item label = "是否显示图表标题">
            <el-switch v-model = "formItemConfig.options.showTitle"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts' && formItemConfig.options.showTitle">
          <el-form-item label = "图表标题">
            <el-input v-model = 'formItemConfig.options.titleText' clearable placeholder = '请输入图表展示的标题'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts' && formItemConfig.options.optionType === 'pie'">
          <el-form-item label = "饼图的外半径">
            <el-input v-model = 'formItemConfig.options.pieRadius' clearable placeholder = '请输入饼图的外半径'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts' && formItemConfig.options.optionType != 'pie' && formItemConfig.options.optionType !== 'map'">
          <el-form-item label = "是否显示X坐标轴">
            <el-switch v-model = "formItemConfig.options.showXAxis"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts' && formItemConfig.options.showXAxis && formItemConfig.options.optionType != 'pie' && formItemConfig.options.optionType !== 'map'">
          <el-form-item label = "X坐标轴名称">
            <el-input v-model = 'formItemConfig.options.xAxisName' clearable placeholder = '请输入X坐标轴名称'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts' && formItemConfig.options.optionType != 'pie' && formItemConfig.options.optionType !== 'map'">
          <el-form-item label = "是否显示Y坐标轴">
            <el-switch v-model = "formItemConfig.options.showYAxis"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts' && formItemConfig.options.showYAxis && formItemConfig.options.optionType != 'pie' && formItemConfig.options.optionType !== 'map'">
          <el-form-item label = "Y坐标轴名称">
            <el-input v-model = 'formItemConfig.options.yAxisName' clearable placeholder = '请输入Y坐标轴名称'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "formItemConfig.type === 'echarts' && formItemConfig.options.optionType === 'map'">
          <el-form-item label = "范围最大值">
            <el-input-number v-model = "formItemConfig.options.mapMax" :min = "1" :step = "10"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "Object.keys(formItemConfig.options).indexOf('startLevelColumn')>=0">
          <el-form-item label = "起始层的栏位名称">
            <el-input v-model = 'formItemConfig.options.startLevelColumn' clearable placeholder = '请输入起始层的栏位名称'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "Object.keys(formItemConfig.options).indexOf('startLevelValue')>=0">
          <el-form-item label = "起始层的栏位值">
            <el-input v-model = 'formItemConfig.options.startLevelValue' clearable placeholder = '请输入起始层的栏位值'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12' v-if = "Object.keys(formItemConfig.options).indexOf('startMetaName')>=0">
          <el-form-item label = "起始元数据表名称">
            <el-select v-model = 'formItemConfig.options.startMetaName' placeholder = '请选择起始元数据表名称'>
              <el-option-group v-for = 'group in allMetaTable' :key = 'group.category_no' :label = 'group.category_name'>
                <el-option v-for = 'item in group.tables' :key = 'item.metauid' :value = 'item.metaname' :label = "item.metadesc ? item.metadesc + '(' + item.metaname + ')' : item.metaname"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label = "固定排序表达式" v-if = "Object.keys(formItemConfig.options).indexOf('fixedOrderbyExpress')>=0">
        <el-input type = "textarea" v-model = 'formItemConfig.options.fixedOrderbyExpress' autosize placeholder="固定过滤条件表达式"></el-input>
      </el-form-item>
      <div style = 'margin-bottom: 6px' v-if = "formItemConfig.type == 'Select' || formItemConfig.type == 'MultiSelect' || formItemConfig.type == 'CheckBox' || formItemConfig.type == 'RadioButton'">
        <span style = 'display: inline-block; width: 80px;'>value名称：</span>
        <el-input size = "mini" v-model = "formItemConfig.options.props.value" style = 'display: inline-block; width: auto'></el-input>
        <span style = 'display: inline-block; width: 90px;margin-left: 20px'>label名称：</span>
        <el-input size="mini" v-model = "formItemConfig.options.props.label" style = 'display: inline-block; width: auto'></el-input>
      </div>
      <el-form-item label = "设置该元素隐藏表达式" v-if = "Object.keys(formItemConfig.options).indexOf('hiddenExpress')>=0">
        <el-input type = "textarea" v-model = 'formItemConfig.options.hiddenExpress' autosize placeholder="设置该元素隐藏表达式(JSON结构)"></el-input>
      </el-form-item>
      <el-form-item label = "设置该元素只读表达式" v-if = "Object.keys(formItemConfig.options).indexOf('disabledExpress')>=0">
        <el-input type = "textarea" v-model = 'formItemConfig.options.disabledExpress' autosize placeholder="设置该元素只读表达式(JSON结构)"></el-input>
      </el-form-item>
      <el-form-item label = "辅助文字" v-if = "formItemConfig.type == 'StarRate' && Object.keys(formItemConfig.options).indexOf('texts')>=0">
        <el-input v-model = 'formItemConfig.options.texts[0]'></el-input>
        <el-input v-model = 'formItemConfig.options.texts[1]'></el-input>
        <el-input v-model = 'formItemConfig.options.texts[2]'></el-input>
        <el-input v-model = 'formItemConfig.options.texts[3]'></el-input>
        <el-input v-model = 'formItemConfig.options.texts[4]'></el-input>
      </el-form-item>
      <el-form-item label = "icon 的类名" v-if = "formItemConfig.type == 'StarRate' && Object.keys(formItemConfig.options).indexOf('iconClasses')>=0">
        <el-input v-model = 'formItemConfig.options.iconClasses[0]'></el-input>
        <el-input v-model = 'formItemConfig.options.iconClasses[1]'></el-input>
        <el-input v-model = 'formItemConfig.options.iconClasses[2]'></el-input>
      </el-form-item>
      <el-form-item label = "未选中的icon 的类名" v-if = "formItemConfig.type == 'StarRate' && Object.keys(formItemConfig.options).indexOf('voidIcon')>=0">
        <el-input v-model = 'formItemConfig.options.voidIcon'></el-input>
      </el-form-item>
      <!-- 普通的表格 -->
      <el-form-item label="定义表头" v-if = "(formItemConfig.type == 'table' || formItemConfig.type == 'table_expand') && propsInfo && propsInfo.settingFrom !== 'templateSetting'">
        <template>
          <div class="addColumn">
            <p @click = "handleAddOption"> <i class = "iconfont icon-add"></i>设置表格栏位</p>
          </div>
          <el-table :data = 'formItemConfig.tableColumn' style="width:100%" empty-text="暂无表格栏位数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'text' label = '表头名称'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.text" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'indexName' label = '表头键名'>
              <template slot-scope = "scope">
                <span>{{scope.row.indexName}}</span>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'sortNum' label = '排序'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.sortNum" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" prop = 'isShow' label = '是否展示在表格'>
              <template slot-scope="scope">
                <el-switch v-model = "scope.row.isShow"></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form-item>
      <!-- 可编辑的表格 -->
      <el-form-item label = "设置可编辑表格表头信息" v-if = "formItemConfig.type == 'editableTable'">
        <template>
          <el-table :data = 'formItemConfig.tableColumns' style="width:100%" empty-text="暂无表头数据，请设置该元数据表字段信息" border stripe>
            <el-table-column align = "center" prop = 'text' label = '表头名称'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.text" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'indexName' label = '表头键名'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.indexName" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'sortNum' label = '排序'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.sortNum" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" prop = 'isShow' label = '是否展示在表格'>
              <template slot-scope="scope">
                <el-switch v-model = "scope.row.isShow"></el-switch>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'readonly' label = '是否只读'>
              <template slot-scope = "scope">
                <el-switch v-model = "scope.row.readonly"></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form-item>
      <el-form-item label = "可编辑表格初始化事件排序条件表达式" v-if = "formItemConfig.type == 'editableTable' && Object.keys(formItemConfig.options).indexOf('fixed_orderby_express')>=0">
        <el-input type = "textarea" v-model = 'formItemConfig.options.fixed_orderby_express' autosize
        placeholder = "可编辑表格初始化事件排序条件表达式"></el-input>
      </el-form-item>
      <!-- 栅格布局部分 -->
      <template v-if = "formItemConfig.type == 'grid'">
        <el-row :gutter = "20">
          <el-col :span = '12'>
            <el-form-item label = "列配置项">
              <draggable tag = "ul" :list = "formItemConfig.columns"  v-bind = "{group:{ name:'options'}, handle: '.drag-item'}" handle = ".drag-item" >
                <li v-for = "(item, index) in formItemConfig.columns" :key = "index" >
                  <i class = "drag-item" style = "font-size: 16px;margin: 0 5px;cursor: move;"><i class = "iconfont icon-tuodong"></i></i>
                  <el-input placeholder = "栅格值" size = "mini" style = "width: 100px;" type = "number" v-model.number = "item.span"></el-input>
                  <el-switch v-if = "Object.keys(item).indexOf('isButtonGroup') !== -1" v-model = 'item.isButtonGroup' active-text = "按钮组"></el-switch>
                  <el-button @click = "handleOptionsRemove(index)" circle plain type = "danger" size = "mini" icon = "iconfont icon-shanchu" style = "padding: 4px;margin-left: 5px;"></el-button>
                </li>
              </draggable>
              <div style = "margin: 10px 0 0 22px;">
                <el-button type = "primary" size = 'small' @click = "handleAddColumn"><i class = 'iconfont icon-add'></i>添加列</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span = '12'>
            <el-form-item label = "栅格间隔">
              <el-input type = "number" v-model.number = "formItemConfig.options.gutter"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span = '12'>
            <el-form-item label = "水平排列方式">
              <el-select v-model = "formItemConfig.options.justify">
                <el-option value = "start" label = "左对齐"></el-option>
                <el-option value = "end" label = "右对齐"></el-option>
                <el-option value = "center" label = "居中"></el-option>
                <el-option value = "space-around" label = "两侧间隔相等"></el-option>
                <el-option value = "space-between" label = "两端对齐"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span = '12'>
            <el-form-item label = "垂直排列方式">
              <el-select v-model = "formItemConfig.options.align">
                <el-option value = "top" label = "顶部对齐"></el-option>
                <el-option value = "middle" label = "居中"></el-option>
                <el-option value = "bottom" label = "底部对齐"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <!-- 操作属性 -->
      <template v-if = "formItemConfig.type != 'echarts' && formItemConfig.type != 'grid' && formItemConfig.type != 'table' && formItemConfig.type != 'pagination' && formItemConfig.type != 'tabs'">
        <el-form-item label = "操作属性">
          <!-- <el-checkbox v-model="formItemConfig.options.readonly" v-if="Object.keys(formItemConfig.options).indexOf('readonly')>=0">完全只读</el-checkbox> -->
          <el-checkbox v-model = "formItemConfig.options.disabled" v-if = "Object.keys(formItemConfig.options).indexOf('disabled')>=0">只读模式</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.filterable" v-if = "Object.keys(formItemConfig.options).indexOf('filterable')>=0">是否可搜索</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.showAdd" v-if = "Object.keys(formItemConfig.options).indexOf('showAdd')>=0">展示添加数据按钮</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.editable" v-if = "Object.keys(formItemConfig.options).indexOf('editable')>=0">文本框可输入</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.clearable" v-if = "Object.keys(formItemConfig.options).indexOf('clearable')>=0">显示清除按钮</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.required" v-if = "Object.keys(formItemConfig.options).indexOf('required')>=0 && formItemConfig.type != 'ReadonlyInput'">必填</el-checkbox>
        </el-form-item>
        <el-form-item label = "正则验证" v-if = "Object.keys(formItemConfig.options).indexOf('pattern')>=0">
          <el-input size = "mini" v-model.lazy = "formItemConfig.options.pattern"  style = " width: 240px;" placeholder = "填写正则表达式"></el-input>
        </el-form-item>
      </template>
      <template v-if = "formItemConfig.type == 'tabs'">
        <el-form-item label = "定义Tabs">
          <div class = "addColumn">
            <p @click = "handleAddOption"> <i class = "iconfont icon-add"></i>添加tab页</p>
          </div>
          <el-table :data = 'formItemConfig.tabList' style = "width:100%" empty-text = "暂无tab页数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'label' label = 'tab页名称'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.label" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "30">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </template>
      <!-- 关联的元素展示 -->
      <el-form-item label = "需要关联的元素" v-if = "formItemConfig.type == 'table_expand' || formItemConfig.type == 'button' || formItemConfig.type == 'table' || formItemConfig.type == 'pagination'">
        <div class = "addColumn">
          <p @click = "handleAddRelated">
            <i class = "iconfont icon-add"></i>
            {{(formItemConfig.type == 'button' || formItemConfig.type == 'pagination') ? '添加需关联的表格' : '添加需关联的页码'}}
          </p>
        </div>
        <el-table :data = 'formItemConfig.relatedComponents' style = "width:100%" empty-text = "暂无关系信息，请添加" border stripe>
          <el-table-column align = "center" prop = 'modelKey' label = '元素model'>
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.modelKey" placeholder = '请选择' @focus = 'getAllModelKey'>
                <!-- 不可关联本身，并且按钮不可关联页码 -->
                <el-option :label = "modelItem.name + '(' + modelItem.model + ')'" :value = 'modelItem.model'
                v-for = '(modelItem, index) in allModelKey' :key = 'index'
                :disabled = "modelItem.model === formItemConfig.model || (formItemConfig.type === 'button' && modelItem.type === 'pagination')"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'relatedType' label = '关联方式'>
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.relatedType" placeholder = '请选择'>
                <el-option label = '检索' value = 'search' :disabled = "formItemConfig.type !== 'button'"></el-option>
                <el-option label = '渲染' value  = 'init' :disabled = "formItemConfig.type === 'button'"></el-option>
                <el-option label = '导出' value  = 'export' :disabled = "formItemConfig.type !== 'button'"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'relatedKey' label = '关联查询字段'>
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.relatedKey" multiple placeholder = '请选择' :disabled = "formItemConfig.type === 'table' " @focus = 'getAllRelatedKey(scope.row.modelKey)'>
                <el-option :label = 'keyItem.text' :value = 'keyItem.indexName' v-for = "keyItem in allRelatedKey" :key = 'keyItem.indexName'></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = "操作" width = "30">
            <template slot-scope = "scope">
              <el-button type = "text" size = "mini" @click = "handleRelatedRemove(scope.$index)" title = '移除'>
                <i class = "iconfont icon-shanchu"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 子表的相关配置 -->
      <!-- 设置树表格的子表配置信息 -->
      <el-row :gutter = "20" v-if = "Object.keys(formItemConfig).indexOf('sub_options')>=0">
        <el-col  :span = '24'>
          <p class = 'expandTable_notice'>树形表格的子表相关信息配置：</p>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否展示子表格的页码功能" >
            <el-switch v-model = "formItemConfig.sub_options.options.showPageInfo"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "子表是否为斑马纹表格">
            <el-switch v-model = "formItemConfig.sub_options.options.stripe"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "子表是否显示边框">
            <el-switch v-model = "formItemConfig.sub_options.options.border"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "子表是否过滤掉逻辑删除的资料">
            <el-switch v-model = "formItemConfig.sub_options.options.isFilterDeleted"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否隐藏子表" >
            <el-switch v-model = "formItemConfig.sub_options.options.isHidden"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "选择子表" >
            <el-select v-model = "formItemConfig.sub_options.metauid" placeholder="请选择" filterable clearable
            @change = "subOptionsList" :disabled = '!currentSelectedMetaTable'>
              <el-option v-for = "item in subOptions" :key = "item.metauid" :label = "item.name" :value = "item.metauid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 子表表头 -->
      <el-form-item label="定义子表表头" v-if = "formItemConfig.type == 'table_expand' && propsInfo && propsInfo.settingFrom !== 'templateSetting'">
        <template>
          <el-table :data = 'formItemConfig.sub_options.tableColumn' style="width:100%" empty-text="暂无表格栏位数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'text' label = '表头名称'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.text" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'indexName' label = '表头键名'>
              <template slot-scope = "scope">
                <span>{{scope.row.indexName}}</span>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'sortNum' label = '排序'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.sortNum" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" prop = 'isShow' label = '是否展示在表格'>
              <template slot-scope="scope">
                <el-switch v-model = "scope.row.isShow"></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form-item>
      <!-- 子表事件配置 -->
      <el-form-item label = "子表初始化事件固定过滤条件表达式" v-if = "Object.keys(formItemConfig).indexOf('sub_options')>=0">
        <el-input type = "textarea" v-model = 'formItemConfig.sub_options.options.fixed_filter_express' autosize
        placeholder = "子表初始化事件固定过滤条件表达式"></el-input>
      </el-form-item>
      <el-form-item label = "子表初始化事件排序条件表达式" v-if = "Object.keys(formItemConfig).indexOf('sub_options')>=0">
        <el-input type = "textarea" v-model = 'formItemConfig.sub_options.options.fixed_orderby_express' autosize
        placeholder = "子表初始化事件排序条件表达式"></el-input>
      </el-form-item>
      <el-form-item label = "子表初始化事件多过滤条件表达式" v-if = "Object.keys(formItemConfig).indexOf('sub_options')>=0">
        <el-input type = "textarea" v-model = 'formItemConfig.sub_options.options.other_condition_express' autosize
        placeholder = "子表初始化事件多过滤条件表达式"></el-input>
      </el-form-item>
      <el-form-item v-if = "formItemConfig.type == 'table_expand' && propsInfo">
        <p class = 'expandTable_notice'>树形表格的子表相关信息配置：</p>
        <Expand-Table-Events :formItemConfig = 'formItemConfig' :propsInfo = 'propsInfo'></Expand-Table-Events>
      </el-form-item>
    </el-form>
    <!-- 设置联动方式 -->
    <Edit-Table-Linkage :row = 'clickRowLinkage' :linkageFrom = 'linkageFrom' :editTableLinkageDialog = 'editTableLinkageDialog' :clickTableColumns = 'clickTableColumns' @giveUpLinkage = 'editTableLinkageDialog = false' @sureSeetingEditTableLinkage = 'sureSeetingEditTableLinkage'></Edit-Table-Linkage>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
// 联动方式
import EditTableLinkage from '@/components/DynamicFormComponents/EditTableLinkage.vue'
// 子表的事件
import ExpandTableEvents from '@/components/MetaFormComponents/ExpandTableEvents.vue'
export default {
  components: {
    Draggable, EditTableLinkage, ExpandTableEvents
  },
  props: ['formItemConfig', 'formDataList', 'propsInfo', 'allMetaTable', 'currentSelectedMetaTable', 'subOptions'],
  data () {
    return {
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      },
      // 所有的事件
      allEvents: [],
      props: { multiple: true },
      // 可关联的字段
      allRelatedKey: [],
      // 关联的model
      allModelKey: [],
      // 设置联动时的弹窗
      editTableLinkageDialog: false,
      clickTableColumns: null,
      clickRowLinkage: null,
      // 设置下拉框的词典表
      eventDicDialog: false,
      selectEventsInfo: {
        inputDic: [],
        outputDic: [],
        eventsNo: ''
      },
      // 设置的是可编辑的表格还是普通元素的联动效果
      linkageFrom: ''
    }
  },
  computed: {
    show () {
      if (this.formItemConfig && Object.keys(this.formItemConfig).length > 0) {
        this.getAllEvents()
        return true
      }
      return false
    }
  },
  methods: {
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 设置成功时
    sureSeetingEditTableLinkage (fromChild) {
      this.editTableLinkageDialog = false
      if (this.linkageFrom === 'normal') {
        // 普通元素设置联动时
        this.formItemConfig.options.linkageOption = {
          isLinkage: fromChild.isLinkage,
          linkageEvents: fromChild.linkageEvents,
          // 联动方式分为四种，一种是获取后台数据进行结果渲染，一种是进行数值计算，一种显示隐藏，一种是改变数据源（针对下拉）
          linkageType: fromChild.linkageType,
          inputDic: fromChild.inputDic,
          outputDic: fromChild.outputDic,
          linkageElements: fromChild.linkageElements,
          expressionArray: fromChild.expressionArray,
          showExpression: fromChild.showExpression,
          sourceExpression: fromChild.sourceExpression
        }
      }
    },
    // 设置普通的表单联动
    showSettingNormalLinkageDialog () {
      this.linkageFrom = 'normal'
      this.clickRowLinkage = JSON.parse(JSON.stringify(this.formItemConfig.options))
      this.$set(this.clickRowLinkage, 'model', this.formItemConfig.model)
      let rowArray = []
      for (let i = 0; i < this.formDataList.length; i++) {
        if (this.formDataList[i].name && this.formDataList[i].model) {
          let obj = {
            text: this.formDataList[i].name,
            indexName: this.formDataList[i].model
          }
          rowArray.push(obj)
        }
      }
      if (rowArray.length) {
        this.clickTableColumns = JSON.parse(JSON.stringify(rowArray))
      }
      this.editTableLinkageDialog = true
    },
    // 获取所有的动态表单事件
    getAllEvents () {
      this.allEvents = []
      this.$get('/events4dform/alllist').then(data => {
        if (data.data.result.code === 'success') {
          this.allEvents = data.data.result.data
        } else if (data.data.result.code === 'failed') {
          this.$message({
            message: data.data.result.msg,
            type: 'warning'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 删除选项时
    handleOptionsRemove (index) {
      if (this.formItemConfig.type === 'grid') {
        this.formItemConfig.columns.splice(index, 1)
      } else if (this.formItemConfig.type === 'table') {
        this.formItemConfig.tableColumn.splice(index, 1)
      } else if (this.formItemConfig.type === 'tabs') {
        this.formItemConfig.tabList.splice(index, 1)
      } else {
        this.formItemConfig.options.options.splice(index, 1)
      }
    },
    // 选择的子表改变时
    subOptionsList (val) {
      if (this.currentSelectedMetaTable) {
        if (this.subOptions && this.subOptions.length) {
          for (let i = 0; i < this.subOptions.length; i++) {
            if (this.subOptions[i].metauid === val && this.subOptions[i].main_refTableUid === this.currentSelectedMetaTable && this.subOptions[i].tableColumns.length) {
              this.$set(this.formItemConfig.sub_options, 'metauid', val)
              this.$set(this.formItemConfig.sub_options, 'pmetauid', this.currentSelectedMetaTable)
              this.subOptions[i].tableColumns.forEach((item, index) => {
                let objExam = {
                  text: item.text,
                  indexName: item.indexName,
                  isShow: true,
                  sortNum: index + 1,
                  isSwitch: item.isSwitch,
                  isFile: item.isFile,
                  showText: item.showText
                }
                this.$set(this.formItemConfig.sub_options.tableColumn, index, objExam)
              })
              break
            }
          }
        } else {
          this.$message({
            message: '所选主表无关联的从表,请重新选择主表',
            type: 'warning'
          })
        }
      } else {
        this.$message({
          message: '请先选择主表的元素表,或先设置主表的表头信息',
          type: 'warning'
        })
      }
    },
    // 新增选项时
    handleAddOption () {
      // 给表格添加栏位信息时
      if (this.formItemConfig.type === 'table' || this.formItemConfig.type === 'table_expand') {
        this.formItemConfig.tableColumn = []
        if (this.currentSelectedMetaTable) {
          this.formItemConfig.tableColumn = []
          for (let i = 0; i < this.allMetaTable.length; i++) {
            for (let t = 0; t < this.allMetaTable[i].tables.length; t++) {
              if (this.allMetaTable[i].tables[t].metauid === this.currentSelectedMetaTable) {
                let metaname = this.allMetaTable[i].tables[t].metadesc ? (this.allMetaTable[i].tables[t].metadesc + '(' + this.allMetaTable[i].tables[t].metaname + ')') : this.allMetaTable[i].tables[t].metaname
                this.$set(this.formItemConfig, 'metauid', this.allMetaTable[i].tables[t].metauid)
                this.$set(this.formItemConfig, 'metaname', metaname)
                this.getTableColumnsBySelectedMetaTableColumns(this.allMetaTable[i].tables[t].columns)
                break
              }
            }
          }
        } else {
          this.$message({
            message: '还没有选择元数据表，无法设置表格栏位，请选择',
            type: 'warning'
          })
        }
      } else if (this.formItemConfig.type === 'tabs') {
        this.$set(this.formItemConfig.tabList, this.formItemConfig.tabList.length, {
          label: '新增tab页名称',
          list: []
        })
      } else {
        this.formItemConfig.options.options.push({
          value: null,
          label: null
        })
      }
    },
    // 根据选中的元数据表的字段信息来获取表格的栏位信息
    getTableColumnsBySelectedMetaTableColumns (columns) {
      if (columns.length) {
        columns.forEach((item, index) => {
          let objExam = {
            text: item.column_desc,
            indexName: item.column_name,
            isShow: true,
            sortNum: index + 1,
            isSwitch: item.ui_type === 'Switch',
            isYear: item.ui_type === 'CalendarYear',
            isFile: item.ui_type === 'File' || item.ui_type === 'Files' || item.ui_type === 'Picture' || item.ui_type === 'Pictures',
            showText: item.reference && item.reference !== '{}' && (item.ui_type !== 'MapXY' && item.ui_type !== 'PicXY' && item.ui_type !== 'GIS_Draw_Line')
          }
          this.$set(this.formItemConfig.tableColumn, index, objExam)
        })
      }
    },
    // 获取所有可关联的model---目前只需要关联表格和页码
    getAllModelKey () {
      this.allModelKey = []
      if (this.formDataList.length) {
        this.formDataList.forEach(item => {
          if (item.type === 'table' || item.type === 'pagination' || item.type === 'table_expand') {
            this.allModelKey.push(item)
          }
        })
      }
    },
    // 获取可选的关联字段
    getAllRelatedKey (modelKey) {
      this.allRelatedKey = []
      for (let i = 0; i < this.formDataList.length; i++) {
        if (modelKey === this.formDataList[i].model && Object.keys(this.formDataList[i]).indexOf('tableColumn') >= 0) {
          this.allRelatedKey = this.formDataList[i].tableColumn
        }
      }
    },
    // 新增关联的元素
    handleAddRelated () {
      if (!this.formItemConfig.relatedComponents.length) {
        let obj = {
          modelKey: '',
          relatedType: 'init',
          relatedKey: null
        }
        if (this.formItemConfig.type === 'button') {
          obj.relatedType = 'search'
        }
        this.formItemConfig.relatedComponents.push(obj)
      } else {
        this.$message({
          message: '只需要关联一个元素即可',
          type: 'warning'
        })
      }
    },
    // 删除关联元素选项时
    handleRelatedRemove (index) {
      this.formItemConfig.relatedComponents.splice(index, 1)
    },
    // 新增栅格布局的行
    handleAddColumn () {
      this.formItemConfig.columns.push({
        span: '',
        isButtonGroup: false,
        list: []
      })
    },
    generateRule () {
      if (this.formItemConfig && Object.keys(this.formItemConfig).length > 0) {
        this.formItemConfig.rules = []
        Object.keys(this.validator).forEach(key => {
          if (this.validator[key]) {
            this.formItemConfig.rules.push(this.validator[key])
          }
        })
      }
    },
    validateRequired (val) {
      if (val) {
        this.validator.required = {required: true, message: `${this.formItemConfig.name}必须填写`}
      } else {
        this.validator.required = null
      }
      this.$nextTick(() => {
        this.generateRule()
      })
    },
    validateDataType (val) {
      if (!this.show) {
        return false
      }
      if (val) {
        this.validator.type = {type: val, message: this.formItemConfig.name + '格式不正确'}
      } else {
        this.validator.type = null
      }
      this.generateRule()
    },
    valiatePattern (val) {
      if (!this.show) {
        return false
      }
      if (val) {
        this.validator.pattern = {pattern: val, message: this.formItemConfig.name + '格式不匹配'}
      } else {
        this.validator.pattern = null
      }
      this.generateRule()
    }
  },
  watch: {
    'formItemConfig.options.isRange': function (val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.formItemConfig.options.defaultValue = null
        } else {
          if (Object.keys(this.formItemConfig.options).indexOf('defaultValue') >= 0) {
            this.formItemConfig.options.defaultValue = ''
          }
        }
      }
    },
    'formItemConfig.options.required': function (val) {
      this.validateRequired(val)
    },
    'formItemConfig.options.formItemConfigType': function (val) {
      this.validateDataType(val)
    },
    'formItemConfig.options.pattern': function (val) {
      this.valiatePattern(val)
    },
    'formItemConfig.name': function (val) {
      if (this.formItemConfig.options) {
        this.validateRequired(this.formItemConfig.options.required)
        this.validateDataType(this.formItemConfig.options.dataType)
        this.valiatePattern(this.formItemConfig.options.pattern)
      }
    }
  }
}
</script>
